<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header-box">
      <view class="header-title">
        <view class="left-title">工单列表</view>
       <!-- <view class="right-filter">
          <image class="filter-img" src="../../static/images/workOrder/filter.png" mode=""></image>
          筛选
        </view> -->
      </view>
      <view class="select-box">
        <uni-data-select v-model="searchData.orderStatus" :localdata="statusList" :clear="false" placeholder="工单状态" @change="resetList"></uni-data-select>
        <uni-data-select v-model="searchData.isConnect" :localdata="typeList" :clear="false" placeholder="工单类型" @change="resetList"></uni-data-select>
      </view>
    </view>
    <!-- 工单列表 -->
    <view class="order-box">
      <scroll-view :scroll-y="true" :lower-threshold="200" @scrolltolower="scrolltolower" class="scroll-Y">
        <view class="order-list" v-if="orderList.length || loadingStatus == 'loading'">
          <work-order-item v-for="(item, index) in orderList" :key="item.id" :orderItem="item" @updateList="resetList"></work-order-item>
          <uni-load-more :status="loadingStatus"></uni-load-more>
        </view>
        <view v-else class="empty-box">
          <image class="empty-img" src="../../static/images/index/empty.png" mode="widthFix"></image>
          暂无工单
        </view>
      </scroll-view>
    </view>
    <!-- 底部tabbar -->
    <custom-tabbar :activeIndex="2"></custom-tabbar>
  </view>
</template>

<script setup>
  import { onMounted, onUnmounted, reactive, toRefs } from 'vue'
  import { onPullDownRefresh } from '@dcloudio/uni-app'
  import { listDeviceOrderPort } from '@/service/work-order.js'
  import { getDicts } from '@/service/common.js'

  // 懒加载图片
  const getImageUrl = (name) => {
    return `../../static/images/index/${name}.png`
  }

  const state = reactive({
    typeList: [],
    statusList: [],
    searchData: {},
    queryParams: {
      isDeleted: 0,
      pageNum: 1,
      pageSize: 10,
      total: 0
    },
    orderList: [],
    loadingStatus: 'more'
  })
  const { typeList, statusList, searchData, queryParams, orderList, loadingStatus } = toRefs(state)

  //下拉刷新
  onPullDownRefresh(() => {
    resetList()
  })

  onMounted(() => {
    getList()
    getDictList()
    uni.$on('updateWorkOrder', resetList)
  })

  onUnmounted(() => {
    uni.$off('add', resetList)
  })

  //重置
  const resetList = () => {
    state.queryParams = {
      isDeleted: 0,
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
    state.orderList = []
    getList()
  }

  // 滚动条触底事件
  const scrolltolower = (e) => {
    if (state.loadingStatus == 'more') {
      state.queryParams.pageNum += 1
      getList()
    }
  }

  //获取列表
  const getList = () => {
    state.loadingStatus = 'loading'
    let params = { ...state.queryParams }
    if (state.searchData.orderStatus && state.searchData.orderStatus != -1) {
      params.orderStatus = state.searchData.orderStatus
    }
    if (state.searchData.isConnect && state.searchData.isConnect != -1) {
      params.isConnect = state.searchData.isConnect
    }
    listDeviceOrderPort(params).then((res) => {
      res.rows.forEach((item) => {
        item.fromLocation = item.fromDeviceOrderInfo ? handleLocation(item.fromDeviceOrderInfo) : ''
        item.toLocation = item.toDeviceOrderInfo ? handleLocation(item.toDeviceOrderInfo) : ''
      })
      state.orderList = state.orderList.concat(res.rows)
      state.queryParams.total = res.total
      state.loadingStatus = res.total > state.orderList.length ? 'more' : 'noMore'
      uni.stopPullDownRefresh()
    })
  }

  //处理位置信息
  const handleLocation = (row) => {
    let location = row.locationList.map((item) => item.name)
    location.push(row.rackName)
    if (Array.isArray(row.unoIndexList) && row.unoIndexList.length) {
      if (row.unoIndexList.length > 1) {
        location.push(`${row.unoIndexList[0]}-${row.unoIndexList[row.unoIndexList.length - 1]}U`)
      } else {
        location.push(`${row.unoIndexList[0]}U`)
      }
    }
    return location.join(' / ')
  }

  //获取字典，工单状态、工单类型
  const getDictList = () => {
    getDicts('is_connect').then((resp) => {
      state.typeList = resp.data.map((p) => ({ text: p.dictLabel, value: p.dictValue }))
      state.typeList.unshift({ value: -1, text: '全部' })
    })
    getDicts('order_status').then((resp) => {
      state.statusList = resp.data.map((p) => ({ text: p.dictLabel, value: p.dictValue }))
      state.statusList.unshift({ value: -1, text: '全部' })
    })
  }

  //工单状态
  const orderStatus = (status) => {
    let statusText = ''
    switch (status) {
      case 0:
        statusText = '未执行'
        break
      case 1:
        statusText = '执行中'
        break
      case 2:
        statusText = '已完成'
        break
    }
    return statusText
  }

  //跳转详情
  const goDetail = (row) => {
    uni.navigateTo({
      url: '/pages/work-order/detail?id=' + row.id
    })
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    height: 100vh;
    position: relative;
    .header-box {
      box-sizing: border-box;
      width: 100%;
      height: 196rpx;
      padding: 48rpx 30rpx 16rpx;
      position: relative;
      .header-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #020217;
          line-height: 45rpx;
        }
        .right-filter {
          font-size: 22rpx;
          color: #000000;
          line-height: 31rpx;
          display: flex;
          align-items: center;
          .filter-img {
            display: block;
            width: 20rpx;
            height: 22rpx;
            margin-right: 6rpx;
          }
        }
      }
      .select-box {
        width: 100%;
        height: 65rpx;
        background-color: #f9fcff;
        border-radius: 8rpx;
        border: 1rpx solid #005bea;
        font-size: 23rpx;
        color: #005bea;
        display: flex;
        align-items: center;
        margin-top: 26rpx;
        .uni-stat__select:nth-child(1) {
          position: relative;
          &::after {
            content: '';
            display: block;
            width: 1px;
            height: 39rpx;
            border-right: 1px solid #a9c8f8;
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        :deep(.uni-select) {
          border: none;
        }
        :deep(.uni-select__input-box) {
          justify-content: center;
        }
        :deep(.uni-select__input-text) {
          width: auto;
          font-size: 23rpx;
          color: #005bea;
        }
        :deep(.uni-icons) {
          color: #005bea !important;
          font-size: 28rpx !important;
          margin-left: 10rpx;
        }
      }
    }
    .order-box {
      width: 100%;
      height: calc(100% - 196rpx);
      background-color: #fff;
      .scroll-Y {
        height: 100%;
      }
      .order-list {
        box-sizing: border-box;
        width: 100%;
        // height: 100%;
        padding: 0 23rpx 190rpx;
        // overflow-y: auto;
        .order-item {
          width: 100%;
          height: 268rpx;
          background: #ffffff;
          box-shadow: 0px 4rpx 4rpx 0px #dbdee6;
          border-radius: 8rpx;
          margin-bottom: 23rpx;
          .order-item-header {
            width: 100%;
            height: 32rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .header-left {
              box-sizing: border-box;
              width: 78rpx;
              height: 100%;
              padding-left: 9rpx;
              background: #295bf5;
              border-radius: 6rpx 6rpx 0rpx 6rpx;
              font-size: 19rpx;
              color: #ffffff;
              line-height: 32rpx;
              position: relative;
              &::after {
                content: '';
                display: block;
                width: 9rpx;
                height: 30rpx;
                background: #295bf5;
                clip-path: polygon(0 0, 100% 100%, 0 100%, 0 0);
                position: absolute;
                right: -8rpx;
                bottom: 0;
              }
            }
            .header-right {
              box-sizing: border-box;
              width: 605rpx;
              height: 100%;
              padding-left: 13rpx;
              background: #eff3fe;
              border-radius: 0rpx 6rpx 0rpx 6rpx;
              font-size: 19rpx;
              color: #707b9b;
              line-height: 32rpx;
              position: relative;
              &::before {
                content: '';
                display: block;
                width: 9rpx;
                height: 30rpx;
                background: #eff3fe;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
                position: absolute;
                left: -8rpx;
                top: 0;
              }
            }
          }
          .order-item-content {
            box-sizing: border-box;
            width: 100%;
            height: 175rpx;
            padding: 20rpx 16rpx;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .left-sign {
              width: 61rpx;
              height: 69rpx;
              border-radius: 8rpx;
              font-size: 19rpx;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-top: 14rpx;
              position: relative;
              .sign-img {
                width: 32rpx;
                margin-bottom: 2rpx;
              }
            }
            .right-info {
              width: 550rpx;
              position: relative;
              .info-row {
                width: 100%;
                margin-bottom: 5rpx;
                .info-name,
                .info-location {
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .info-name {
                  font-size: 26rpx;
                  font-weight: bold;
                  color: #262d37;
                  line-height: 35rpx;
                  .info-port {
                    font-size: 22rpx;
                    font-weight: normal;
                    color: #7e8ca0;
                  }
                }
                .info-location {
                  font-size: 17rpx;
                  color: #7e8ca0;
                  line-height: 35rpx;
                }
              }
              .info-line {
                width: 17rpx;
                height: 76rpx;
                border: 1rpx solid #b6d1fe;
                border-right-color: transparent;
                border-radius: 10rpx 0 0 10rpx;
                position: absolute;
                left: -28rpx;
                top: 18rpx;
                &::before,
                &::after {
                  content: '';
                  display: block;
                  width: 6rpx;
                  height: 6rpx;
                  border-radius: 50%;
                  background: #3e78f8;
                  position: absolute;
                  right: -3rpx;
                }
                &::before {
                  top: -3rpx;
                }
                &::after {
                  bottom: -3rpx;
                }
              }
            }
            .connect-sign {
              background-color: #fff5db;
              color: #eb9000;
            }
            .noConnect-sign {
              background-color: #ffe6e5;
              color: #f24d4d;
            }
          }
          .order-item-footer {
            box-sizing: border-box;
            width: 649rpx;
            height: 59rpx;
            margin: 0 auto;
            border-top: 1rpx dashed #0c71e2;
            display: flex;
            .footer-left,
            .footer-right {
              width: 50%;
              height: 100%;
              font-size: 23rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .footer-left {
              color: #295bf5;
            }
            .footer-right {
              color: #f24d4d;
            }
          }
        }
      }
      .empty-box {
        box-sizing: border-box;
        width: 100%;
        height: calc(100% - 7.27vh);
        padding-bottom: 10vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 3.125vw;
        color: #808994;
        .empty-img {
          display: block;
          width: 17.875vw;
          margin-bottom: 2.7vh;
        }
      }
    }
  }
</style>
